@import "../../common/css/mixin.less";
@r: 1rem/75;

.menuWrapper {
  width: 100%;
  height: 88*@r;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  .top-line(1px,rgba(102,102,102,.15));
  background: #fff;

  ul {
    height: 100%;
    display: flex;
    align-items: center;
    background: #fff;

    li {
      text-align: center;
      flex: 1;

      i {
        width: 40*@r;
        height: 40*@r;
        display: block;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .home {
        background-image: url("../../images/menu/home_outline.png");
      }
      .home-active {
        background-image: url("../../images/menu/home.png") !important;
      }

      .market {
        background-image: url("../../images/menu/shopcart_outline.png");
      }
      .market-active {
        background-image: url("../../images/menu/shopcart.png") !important;
      }

      .my {
        background-image: url("../../images/menu/person_outline.png");
      }
      .my-active {
        background-image: url("../../images/menu/person.png") !important;
      }

      p {
        font-size: 20*@r;
        color: #E33F3F;
        margin-top: 10*@r;
      }
    }
  }
}
